<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>会员登录</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
        type="text/css"/>
  <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"
          type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js"
          type="text/javascript"></script>
  <!-- 引入自定义css文件 style.css -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>
  <style>
    body {
      margin-top: 20px;
      margin: 0 auto;
    }

    .carousel-inner .item img {
      width: 100%;
      height: 300px;
    }

    .container .row div {
      /* position:relative;
 float:left; */
    }

    font {
      color: #3164af;
      font-size: 18px;
      font-weight: normal;
      padding: 0 10px;
    }
  </style>
</head>

<body>


<jsp:include page="head.jsp"/>


<div class="container">
  <div class="row">

    <div style="margin:0 auto; margin-top:10px;width:950px;">
      <strong style="font-size:16px;margin:5px 0;">订单详情</strong>
      <table class="table table-bordered">
        <tbody>
        <tr class="warning">
          <th>图片</th>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <c:forEach items="${items}" var="item">
          <tr class="active die" id="item.product.name">
            <td width="60" width="40%">
              <input type="hidden" name="id" value="22">
              <img src="${pageContext.request.contextPath}/${item.product.image}" width="70"
                   height="60">
            </td>
            <td width="30%">
              <a target="_blank">${fn:substring(item.product.name,0,10 )}..</a>
            </td>
            <td width="20%">
              <span>${item.product.shopPrice}</span>
            </td>
            <td width="10%">
              <span>${item.count}</span>
            </td>
            <td width="15%">
              <span class="subtotal">${item.price}</span>
            </td>
            <td>
              <a href="javascript:;" class="delete" id="${item.product.pid}">删除</a>
            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
      <c:if test="${empty items}">
        <h3 style="text-align: center">购物车空空如也，去 <a
                href="${pageContext.request.contextPath}/index.do">看看</a> 吧</h3>
      </c:if>
    </div>
  </div>

  <div style="margin-right:130px;">
    <div style="text-align:right;">
      <em style="color:#ff6600;">

      </em> 赠送积分: <em style="color:#ff6600;" id="code">${total / 50}</em>&nbsp; 商品金额: <strong
            style="color:#ff6600;">￥<span id="money">${total}</span>元</strong>
    </div>
    <div style="text-align:right;margin-top:10px;margin-bottom:10px;">
      <a href="${pageContext.request.contextPath}/car/deletecar.do?uid=${sessionScope.user.uid}"
         id="clear" class="clear">清空购物车</a>
      <a href="javascript:;">
        <input type="button" width="100" value="提交订单" id="sub" name="submit" border="0"
               style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                       height:35px;width:100px;color:white;">
      </a>
    </div>
  </div>

</div>

<jsp:include page="foot.jsp"/>

</body>
<script>
  $(".delete").click(function (e) {
    var pid = $(this).attr("id");
    $.ajax({
      url: "${pageContext.request.contextPath}/car/deletesingle.do",
      data: {
        pid: pid,
        uid: "${sessionScope.user.uid}"
      },
      success: function (d) {
        if (d.msc == 1) {
          document.getElementById(pid).parentNode.parentNode.remove();
        }
      }
    })

  })

  var c = 2;
  $("#sub").click(function () {
    $.ajax({
      url: "${pageContext.request.contextPath}/order/addOrder.do",
      type :"post",
      success: function (d) {
//自动消失的弹窗


        if (d.status == 0) {
          var windowWidth = $(window).width();
          var tipsDiv = '<div class="tipsClass">添加订单成功</div>';
          $('body').append(tipsDiv);
          $('div.tipsClass').css({
            'top': 130 + 'px',
            'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
            'position': 'absolute',
            'padding': '10px 16px',
            'background': '#8FBC8F',
            'font-size': 18 + 'px',
            'margin': '0 auto',
            'text-align': 'center',
            'width': '350px',
            'height': 'auto',
            'color': '#fff',
            'opacity': '0.8'
          }).show();
          setTimeout(
              function () {
                $('div.tipsClass').fadeOut();
              }, (1.5 * 1000));
          window.setInterval(function () {
            c--;
            if (c <= 0) {
              console.log(d.data.oid);
              location.href = "${pageContext.request.contextPath}/order/orderPay.do?oid="
                  + d.data.oid;
            }
          }, 1000);
        }
        if(d.status == 1){
          var windowWidth = $(window).width();
          var tipsDiv = '<div class="tipsClass">商品库存不足</div>';
          $('body').append(tipsDiv);
          $('div.tipsClass').css({
            'top': 130 + 'px',
            'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
            'position': 'absolute',
            'padding': '10px 16px',
            'background': 'red',
            'font-size': 18 + 'px',
            'margin': '0 auto',
            'text-align': 'center',
            'width': '350px',
            'height': 'auto',
            'color': '#fff',
            'opacity': '0.8'
          }).show();
          setTimeout(
              function () {
                $('div.tipsClass').fadeOut();
              }, (1.5 * 1000));
        }
      }
    })
  })
</script>

</html>